import React from 'react';
import * as api from './api';
import routes from './routes';
import styles from './style.css';
import PropTypes from 'prop-types';
import {hasPermissions} from './utils';
import {PERMISSION} from './constants';
import {injectIntl, formatMessage} from './intl';
import {Button, Spin, Card, Row, Col, Table} from 'antd';
import {DATE_FORMAT, TABLE, FILES_API} from '../constants';
import WrappedPopconfirm from '../common/WrappedPopconfirm';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {formatDateTime, conventEnumValueToString} from '../utils';
import {saleOrderTransportType, declarePlace, declareType, saleShipmentStatus} from '../Enum';
export class DetailPanel extends React.PureComponent {
    state = {
        loading: false
    };
    componentDidMount() {
        this.props.init();
    }
    handleAbandonClick = id => {
        const {detailData} = this.props;
        this.setState({loading: true});
        api.abandonData(id, {rowVersion: detailData.rowVersion}).then(res => {
            if(res.ok)
                this.props.successReturn();
            this.setState({loading: false});
        });
    };
    render() {
        const {detailData, loading, permissions} = this.props;
        const {options, details = [], attachments = []} = this.props.detailData;
        const operations = [];
        if(hasPermissions(permissions, PERMISSION.update) && hasPermissions(options, PERMISSION.update))
            operations.push(
                <Button key="update" href={`#${routes.update.format(this.props.id)}`} className={styles.btnMargin} size="small">
                    {formatMessage({
                        id: 'detail.btn.update',
                        defaultMessage: '编辑'
                    })}
                </Button>
            );
        if(hasPermissions(permissions, PERMISSION.abandon) && hasPermissions(options, PERMISSION.abandon))
            operations.push(
                <WrappedPopconfirm
                    id={this.props.id}
                    key="abandon"
                    title={formatMessage({
                        id: 'detail.popconfirm.message',
                        defaultMessage: '是否继续?'
                    })}
                    okText={formatMessage({
                        id: 'detail.popconfirm.confirm',
                        defaultMessage: '确认'
                    })}
                    cancelText={formatMessage({
                        id: 'detail.popconfirm.cancel',
                        defaultMessage: '取消'
                    })}
                    onConfirm={this.handleAbandonClick}>
                    <Button size="small" className={styles.btnMargin}>
                        {formatMessage({
                            id: 'detail.btn.abandon',
                            defaultMessage: '作废'
                        })}
                    </Button>
                </WrappedPopconfirm>
            );
        if(hasPermissions(permissions, PERMISSION.signned) && hasPermissions(options, PERMISSION.signned))
            operations.push(
                <Button key="signned" href={`#${routes.signned.format(this.props.id)}`} className={styles.btnMargin} size="small">
                    {formatMessage({
                        id: 'detail.btn.signned',
                        defaultMessage: '签收'
                    })}
                </Button>
            );
        if(hasPermissions(permissions, PERMISSION.dateSupplement) && hasPermissions(options, PERMISSION.dateSupplement))
            operations.push(
                <Button key="dateSupplement" href={`#${routes.dateSupplement.format(this.props.id)}`} className={styles.btnMargin} size="small">
                    {formatMessage({
                        id: 'detail.btn.dateSupplement',
                        defaultMessage: '日期补录'
                    })}
                </Button>
            );
        const columns = [{
            title: <span className="ant-form-item-required">{formatMessage({
                id: 'newPanel.colums.saleConfirmationrCode',
                defaultMessage: '销售确认书编号'
            })}</span>,
            dataIndex: 'saleConfirmationrCode'
        }, {
            title: <span className="ant-form-item-required">{formatMessage({
                id: 'newPanel.colums.saleDeliveryOrderCode',
                defaultMessage: '交货单编号'
            })}</span>,
            dataIndex: 'saleDeliveryOrderCode'
        }, {
            title: <span className="ant-form-item-required">{formatMessage({
                id: 'newPanel.colums.productCode',
                defaultMessage: '物料号'
            })}</span>,
            dataIndex: 'productCode'
        }, {
            title: formatMessage({
                id: 'newPanel.colums.productName',
                defaultMessage: '物料名称'
            }),
            dataIndex: 'productName'
        }, {
            title: <span className="ant-form-item-required">{formatMessage({
                id: 'newPanel.colums.vin',
                defaultMessage: 'VIN'
            })}</span>,
            dataIndex: 'vin'
        }, {
            title: <span className="ant-form-item-required">{formatMessage({
                id: 'newPanel.colums.quantity',
                defaultMessage: '数量'
            })}</span>,
            dataIndex: 'quantity'
        }, {
            title: formatMessage({
                id: 'newPanel.colums.price',
                defaultMessage: '单价'
            }),
            dataIndex: 'price'
        }, {
            title: formatMessage({
                id: 'newPanel.colums.totalPrice',
                defaultMessage: '总价'
            }),
            dataIndex: 'totalPrice'
        }];
        return (
            <div className={styles.detail}>
                <Spin spinning={loading || this.state.loading}>
                    <Card title={<Row>
                        <Col span={6}>
                            {formatMessage({
                                id: 'detail.card.waybillInformation',
                                defaultMessage: '运单信息'
                            })}
                        </Col>
                        <Col className={styles.textAlign} span={18}>
                            {operations}
                        </Col>
                    </Row>}>
                        <DescriptionList>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.code',
                                defaultMessage: '发运单号'
                            })}>
                                {detailData.code}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.brandName',
                                defaultMessage: '品牌'
                            })}>
                                {`${detailData.brandCode}(${detailData.brandName})`}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.dealerCode',
                                defaultMessage: '总代'
                            })}>
                                {`${detailData.dealerCode}(${detailData.dealerName})`}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.batchNumber',
                                defaultMessage: '批次号'
                            })}>
                                {detailData.batchNumber}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.transportType',
                                defaultMessage: '运输方式'
                            })}>
                                {conventEnumValueToString(saleOrderTransportType, detailData.transportType)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.origin',
                                defaultMessage: '起运地'
                            })}>
                                {detailData.origin}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.destination',
                                defaultMessage: '目的地'
                            })}>
                                {detailData.destination}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.expectShipmentDate',
                                defaultMessage: '预计发运日期'
                            })}>
                                {formatDateTime(detailData.expectShipmentDate, DATE_FORMAT)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.actualShipmentDate',
                                defaultMessage: '实际发运日期'
                            })}>
                                {formatDateTime(detailData.actualShipmentDate, DATE_FORMAT)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.expectDepartedDate',
                                defaultMessage: '预计离港日期'
                            })}>
                                {formatDateTime(detailData.expectDepartedDate, DATE_FORMAT)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.expectArrivalDate',
                                defaultMessage: '预计到港日期'
                            })}>
                                {formatDateTime(detailData.expectArrivalDate, DATE_FORMAT)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.expectShipmentDay',
                                defaultMessage: '预计发运天数'
                            })}>
                                {detailData.expectShipmentDay}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.actualDepartedDate',
                                defaultMessage: '实际离港日期'
                            })}>
                                {formatDateTime(detailData.actualDepartedDate, DATE_FORMAT)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.actualArrivalDate',
                                defaultMessage: '实际到港日期'
                            })}>
                                {formatDateTime(detailData.actualArrivalDate, DATE_FORMAT)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.actualShipmentDay',
                                defaultMessage: '实际发运天数'
                            })}>
                                {detailData.actualShipmentDay}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.shipmentNumber',
                                defaultMessage: '运输单号'
                            })}>
                                {detailData.shipmentNumber}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.shippingCompanyAirline',
                                defaultMessage: '船公司/航空公司'
                            })}>
                                {detailData.shippingCompanyAirline}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.declarePlace',
                                defaultMessage: '报关地点'
                            })}>
                                {conventEnumValueToString(declarePlace, detailData.declarePlace)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.declareType',
                                defaultMessage: '报关类型'
                            })}>
                                {conventEnumValueToString(declareType, detailData.declareType)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.partShipmentStatus',
                                defaultMessage: '状态'
                            })}>
                                {conventEnumValueToString(saleShipmentStatus, detailData.partShipmentStatus)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.remark',
                                defaultMessage: '备注'
                            })}>
                                {detailData.remark}
                            </DescriptionList.Description>
                        </DescriptionList>
                    </Card>
                    <Card title={<Row>
                        <Col span={6}>
                            {formatMessage({
                                id: 'detail.card.signforinformation',
                                defaultMessage: '签收信息'
                            })}
                        </Col>
                    </Row>}>
                        <DescriptionList>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.receipterName',
                                defaultMessage: '签收人'
                            })}>
                                {detailData.receipterName}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.receiptTime',
                                defaultMessage: '签收时间'
                            })}>
                                {formatDateTime(detailData.receiptTime, DATE_FORMAT)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.signnedRemark',
                                defaultMessage: '签收备注'
                            })}>
                                {detailData.signnedRemark}
                            </DescriptionList.Description>
                        </DescriptionList>
                    </Card>
                    <Card title={<Row>
                        <Col span={6}>
                            {formatMessage({
                                id: 'detail.card.essentialinformation',
                                defaultMessage: '基本信息'
                            })}
                        </Col>
                    </Row>}>
                        <DescriptionList>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.creatorName',
                                defaultMessage: '创建人'
                            })}>
                                {detailData.creatorName}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.createTime',
                                defaultMessage: '创建时间'
                            })}>
                                {formatDateTime(detailData.createTime, DATE_FORMAT)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.modifierName',
                                defaultMessage: '修改人'
                            })}>
                                {detailData.modifierName}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.modifyTime',
                                defaultMessage: '修改时间'
                            })}>
                                {formatDateTime(detailData.modifyTime, DATE_FORMAT)}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.abandonerName',
                                defaultMessage: '作废人'
                            })}>
                                {detailData.abandonerName}
                            </DescriptionList.Description>
                            <DescriptionList.Description term={formatMessage({
                                id: 'detail.info.abandonTime',
                                defaultMessage: '作废时间'
                            })}>
                                {formatDateTime(detailData.abandonTime, DATE_FORMAT)}
                            </DescriptionList.Description>
                        </DescriptionList>
                    </Card>
                    <Card
                        title={formatMessage({
                            id: 'detail.details.title',
                            defaultMessage: '整车发运单清单'
                        })}
                        bordered={false}>
                        <Table
                            className="white-space-nowrap"
                            rowKey="id"
                            columns={columns}
                            pagination={false}
                            dataSource={details}
                            {...TABLE}/>
                    </Card>
                    <Card title={formatMessage({
                        id: 'detail.details.attachment',
                        defaultMessage: '附件清单'
                    })}>
                        {attachments && attachments.length >= 0
                            ? <DescriptionList>
                                {attachments.map(item => (<DescriptionList.Description key={item.fileId}>
                                    <a icon="download" download href={`${FILES_API.files}/${item.fileId}`} size="small">
                                        {item.fileName}</a> </DescriptionList.Description>))}
                            </DescriptionList>
                            : <DescriptionList title={formatMessage({
                                id: 'detailPanel.content.noAttachment',
                                defaultMessage: '暂无附件'
                            })} />}
                    </Card>
                </Spin>
                <div className="page-toolbar">
                    <Button type="primary" disabled={loading} onClick={this.props.onCancel}>
                        {formatMessage({
                            id: 'detail.btn.return',
                            defaultMessage: '返回'
                        })}
                    </Button>
                </div>
            </div>
        );
    }
}
DetailPanel.propTypes = {
    detailData: PropTypes.object.isRequired,
    id: PropTypes.string.isRequired,
    init: PropTypes.func.isRequired,
    loading: PropTypes.bool.isRequired,
    permissions: PropTypes.array.isRequired,
    successReturn: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired
};
import {connect} from 'react-redux';
import {getDetail, querySearch} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getDetailData = selectorFactory(['page', 'domainData', 'detail', 'data']);

const mapStateToProps = (state, ownProps) => ({
    id: ownProps.id,
    loading: state.getIn(['page', 'domainData', 'detail', 'isFetching']),
    detailData: getDetailData(state),
    permissions: getPermissions(state)
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    init: () => dispatch(getDetail(ownProps.id)),
    onCancel: () => {
        ownProps.history.push(routes.query.url());
    },
    successReturn: () => {
        dispatch(querySearch());
        ownProps.history.push(routes.query.url());
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
